<template>
	<view class="custom-tabbar fix flex-center fill-base b-1px-t">
		<view @tap.stop="changeTab(item)" class="flex-center flex-column mt-sm"
			:style="{width: (100/configInfo[tabType].length) + '%',color:item.default_img.includes('https://')
            ? '#252324' : cur == item.id ? 'rgba(88, 192, 110, 1)' : item.selected_img == item.default_img ? tabType=='coachTabBar'?'#A1A1B3': tabType=='agentTabBar'?'#CECEDB':'#BCCAD9':'#666'}"
			v-for="(item,index) in configInfo[tabType]" :key="index">
			<image class="item-img" :src="cur == item.id ? item.selected_img : item.default_img"
				v-if="item.default_img.includes('https://')"></image>
			<i class="iconfont" :class="cur == item.id ? item.selected_img : item.default_img" v-else></i>
			<view class="text" :class="[{ 'text-active': cur == item.id && item.default_img.includes('https://') }]">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			tabType: {
				type: String,
				default () {
					return 'tabBar'
				}
			},
			cur: {
				type: Number,
				default () {
					return 0
				}
			},
		},
		data() {
			return {}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			activeIndex: state => state.order.activeIndex,
		}),
		async mounted() {
			let that = this;
			let sysheight = uni.getWindowInfo().windowHeight
			let {
				navBarHeight
			} = that.configInfo
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(that);
				query.select('.custom-tabbar').boundingClientRect(data => {
					let curSysHeight = sysheight - data.height - navBarHeight
					let configInfo = that.$util.deepCopy(this.configInfo)
					configInfo.curSysHeight = curSysHeight
					configInfo.tabbarHeight = data.height
					that.updateConfigItem({
						key: 'configInfo',
						val: configInfo
					})
				}).exec();
			}, 500)
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updateConfigItem']),
			// 点击跳转
			async changeTab(item) {
				if (!item.id) {
					await this.getConfigInfo()
					let arr = this.configInfo[this.tabType].filter(aitem => {
						return aitem.name == item.name
					})
					item = arr[0]
				}
				let {
					id: index
				} = item
				let {
					tabType,
					activeIndex,
					cur,
				} = this
				let page = {
					tabBar: {
						1: `/pages/service`,
						2: `/pages/technician`,
						3: `/pages/dynamic`,
						4: `/pages/order?tab=${activeIndex}`,
						5: `/pages/mine`,
						6: `/pages/shopstore`,
						7: `/pages/map`,
						8: `/pages/partner`
					},
					coachTabBar: {
						1: `/pages/coach-index`,
						2: `/technician/pages/order/list?tab=1`,
						3: `/technician/pages/count`,
						4: `/technician/pages/mine`,
						5: `/technician/pages/task/list`
					},
					agentTabBar: {
						1: `/pages/agent-index`,
						2: `/agent/pages/order`,
						5: `/agent/pages/mine`,
					}
				}
				if (index == cur) return
				this.$util.goUrl({
					url: page[tabType][index],
					openType: `reLaunch`
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.custom-tabbar {
		height: 98rpx;
		bottom: 0;
		height: calc(98rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.item-img {
			width: 56rpx;
			height: 56rpx;
		}

		.iconfont {
			font-size: 40rpx;
		}

		.text {
			font-size: 22rpx;
			height: 32rpx;
      color: #818181;
		}
    .text-active {
      font-weight: 400;
      font-size: 22rpx;
      color: #58C06E;
    }
	}
</style>